<template>
  <view class="bonus-tip">
    <text class="phase">{{lottery.phase}}期</text>
    <image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/index/wycjq.png"></image>
   <!-- <view class="cash">
      <view class="item" style="--i: 1">万</view>
      <view class="item" style="--i: 2">元</view>
      <view class="item" style="--i: 3">现</view>
      <view class="item" style="--i: 4">金</view>
    </view>
    <text class="hint">抽奖</text> -->
    剩余
    <text class="tag">{{lottery.remainQuota}}</text>个名额，预计<text class="rd">{{lottery.remainDay}}天</text>内开奖
  </view>
</template>

<script>
  export default {
    name: "homeLottery", //首页抽奖活动倒计时
    data() {
      return {
        lottery: {
          phase: 0,
          remainQuota: 0,
          remainDay: 0
        },
      }
    },
    methods: {
      async getLotteryData() {
      	const res = await this.$request({
      		method: 'post',
      		url: '/marketing-center/raffleActivityEntity/indexTips',
      		data: {	}
      	})
        this.lottery = res.datas //没数据时后台返回为null
        if(this.lottery !== null) {
          this.$emit('updateLottery', true)
        } else {
          this.$emit('updateLottery', false)
        }
      },
    },
    mounted(){
      this.getLotteryData()
    }
  }
</script>

<style lang="scss" scoped>
  .bonus-tip {
    height: 84rpx;
    margin: 22rpx 16rpx;
    padding: 10rpx 30rpx;
    border-radius: 14rpx;
    background: linear-gradient(270deg, #FFFFFF 0%, #FEF1F0 100%);
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #202020;
    text-align: center;
    
    .phase {
      font-size: 28rpx;
      font-weight: 500;
    }
    
    image {
      width: 190rpx;
      height: 32rpx;
      margin-right: 8rpx;
      margin-left: 2rpx;
      position: relative;
      top: 5rpx;
    }

    .cash {
      display: flex;
      font-size: 13px;
      font-weight: 500;
      color: #cf1a1b;
      width: 160rpx;

      .item {
        flex: 1;
        animation: moveText 1.5s ease-in-out infinite;
        animation-delay: calc(0.1s * var(--i));
      }
    }

    @keyframes moveText {
      0% {
        transform: translateY(0px);
        font-size: 13px;
      }

      20% {
        transform: translateY(-20px);
        font-size: 15px;
        font-weight: 400
      }

      40% {
        transform: translateY(0px);
        font-size: 17px;
        font-weight: 600
      }

      100% {
        transform: translateY(0px);
        font-size: 13px;
      }
    }
    
    .hint {
      font-size: 15px;
      font-weight: bold;
    }

    .tag {
      background: #FFE4E4;
      border-radius: 4rpx;
      border: 1rpx solid #CF1A1B;
      padding: 0 4rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #CF1A1B;
      margin: 0 8rpx;
    }

    .rd {
      font-weight: 400;
      font-size: 26rpx;
      color: #CF1A1B;
    }
  }
</style>